<template>
    <div class="account-box">
        <div class="toggle">
            <a @click="isMsgLogin = false" href="javascript:;" v-if="isMsgLogin">
                <i class="iconfont icon-user"></i> 使用账号登录
            </a>
            <a @click="isMsgLogin = true" href="javascript:;" v-else>
                <i class="iconfont icon-msg"></i> 使用短信登录
            </a>
        </div>
        <div class="form">
            <template v-if="!isMsgLogin">
                <div class="form-item">
                    <div class="input">
                        <i class="iconfont icon-user"></i>
                        <input type="text" placeholder="请输入用户名或手机号" v-model="account" />
                    </div>
                    <!-- <div class="error"><i class="iconfont icon-warning" />请输入手机号</div> -->
                </div>
                <div class="form-item">
                    <div class="input">
                        <i class="iconfont icon-lock"></i>
                        <input type="password" placeholder="请输入密码" v-model="password">
                    </div>
                </div>
            </template>
            <template v-else>
                <div class="form-item">
                    <div class="input">
                        <i class="iconfont icon-user"></i>
                        <input type="text" placeholder="请输入手机号" />
                    </div>
                </div>
                <div class="form-item">
                    <div class="input">
                        <i class="iconfont icon-code"></i>
                        <input type="password" placeholder="请输入验证码">
                        <span class="code">发送验证码</span>
                    </div>
                </div>
            </template>
            <div class="form-item">
                <div class="agree">
                    <CheckBox :val.sync="isAgree" :title="'agree'"></CheckBox>
                    <p style="color:red;" v-show="!isAgree">请勾选</p>
                    <span>我已同意</span>
                    <a href="javascript:;">《隐私条款》</a>
                    <span>和</span>
                    <a href="javascript:;">《服务条款》</a>
                </div>
            </div>
            <button class="btn" @click="dengadd()">登录</button>
        </div>
        <div class="action">
            <!-- qq图标 -->
            <a
                href="https://graph.qq.com/oauth2.0/authorize?client_id=100556005&response_type=token&scope=all&redirect_uri=http%3A%2F%2Fwww.corho.com%3A8080%2F%23%2Flogin%2Fcallback">
                <img src="https://qzonestyle.gtimg.cn/qzone/vas/opensns/res/img/Connect_logo_7.png" alt="">
            </a>
            <!-- <span id="qqLoginBtn"></span> -->

            <div class="url">
                <a href="javascript:;">忘记密码</a>
                <a href="javascript:;">免费注册</a>
            </div>
        </div>
    </div>
</template>
<script>
import CheckBox from '../subcategory/CheckBox.vue';
import { loginapi } from "@/utils/api/delogin"
import QC from "qc"
export default {
    data() {
        return {
            isMsgLogin: false,
            isAgree: false,
            password: '123456',
            account: 'xiaotuxian001'
        };
    },
    methods: {
        dengadd() {
            // console.log(1);
            if (!this.isAgree) {
                this.$message({ text: '请勾选' })
                return false
            }
            if (!this.isMsgLogin) {
                loginapi(this.account, this.password).then(res => {
                    // console.log(res)
                    this.$message({ text: '登入成功', type: 'success' })
                    let { id, account, avatar, nickname, token } = res.result
                    //合并购物车
                    if (this.$store.state.userinfo && this.$store.state.user.userinfo.token) {
                        this.$store.dispatch('cart/cartlist')
                    }
                    this.$store.commit('user/setUser', { id, account, avatar, nickname, token })
                    if (!location.href.includes('?')) {
                        this.$router.push('/')
                    } else {
                        var url = location.href.split('?')[1].split("=")
                        this.$router.push(decodeURIComponent(url[1]))
                    }
                }).catch(err => {
                    // console.log(err);
                    this.$message({ text: '账号密码不对', type: 'error' })
                })
            } else {
                // 短信验证码
            }
        }
    },
    mounted() {
        QC.Login({
            btnId: 'qqLoginBtn'
        })
    },
    components: { CheckBox }
}
</script>
<style lang="scss">
@import "@/assets/css/variables.scss";

.account-box {
    .toggle {
        padding: 15px 40px;
        text-align: right;

        a {
            color: $xtxColor;

            i {
                font-size: 14px;
            }
        }
    }

    .form {
        padding: 0 40px;

        &-item {
            margin-bottom: 28px;

            .input {
                position: relative;
                height: 36px;

                >i {
                    width: 34px;
                    height: 34px;
                    background: #cfcdcd;
                    color: #fff;
                    position: absolute;
                    left: 1px;
                    top: 1px;
                    text-align: center;
                    line-height: 34px;
                    font-size: 18px;
                }

                input {
                    padding-left: 44px;
                    border: 1px solid #cfcdcd;
                    height: 36px;
                    line-height: 36px;
                    width: 100%;

                    &.error {
                        border-color: $priceColor;
                    }

                    &.active,
                    &:focus {
                        border-color: $xtxColor;
                    }
                }

                .code {
                    position: absolute;
                    right: 1px;
                    top: 1px;
                    text-align: center;
                    line-height: 34px;
                    font-size: 14px;
                    background: #f5f5f5;
                    color: #666;
                    width: 90px;
                    height: 34px;
                    cursor: pointer;
                }
            }

            >.error {
                position: absolute;
                font-size: 12px;
                line-height: 28px;
                color: $priceColor;

                i {
                    font-size: 14px;
                    margin-right: 2px;
                }
            }
        }

        .agree {
            a {
                color: #069;
            }
        }

        .btn {
            display: block;
            width: 100%;
            height: 40px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            background: $xtxColor;

            &.disabled {
                background: #cfcdcd;
            }
        }
    }

    .action {
        padding: 20px 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .url {
            a {
                color: #999;
                margin-left: 10px;
            }
        }
    }
}
</style>